<template>
  <div v-if="visible" class="privacy">
    <div class="modal">

      <div class="title">沁园 隐私政策</div>

      <p class="privacy-content">
        我们致力于保护您可能与我们共享的个人信息(“个人信息”)的机密性和安全性。 请阅读并确认您在使用小程序前己充分理解本隐私政策。
        勾选“我已阅读并同意该隐私政策“并以任何方式使用小程序、或经由小程序提供您的个人信息即表示您确认您品年满:14周发并同意本隐私政策
        (若隐私政策在小程序上更新后， 您继续使用小程序、服务，或继续提供您的个人信息，表示您继续同意此更新后的隐私政策)。
        如果您不同意本隐私政策的任何条款，很遗憾您将无法继续使用本小程序。如果您有任何疑问，请与我们联系。
      </p>

      <div class="agree">
        <div class="checkbox" @click="isAggree = !isAggree"><span v-if="isAggree">✔</span></div>
        <div class="agree-text">我已阅读并同意该</div>
        <div class="privacy-text">隐私政策</div>
      </div>

      <div class="agree-btn" @click="confirm">同意</div>
      <div class="not-agree-btn" @click="cancel">不同意</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      isAggree: false,
      resolve: null
    }
  },
  methods: {
    open() {
      return new Promise(resolve => {
        this.resolve = resolve
        this.visible = true  
      })
    },
    
    confirm() {
      if (!this.isAggree) {
        return uni.showToast({
          icon: 'none',
          title: '请阅读并同意隐私政策'
        })
      }
      this.resolve({ confirm: true })
      this.visible = false
    },
    
    cancel() {
      this.resolve({ confirm: false })
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.privacy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  .modal {
    position: absolute;
    width: 598rpx;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding-top: 50rpx;
    padding-bottom: 50rpx;
    background-color: white;
    border-radius: 16rpx;
    .title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 50rpx;
    }
    .privacy-content {
      width: 450rpx;
      font-size: 24rpx;
      color: #a29f9f;
      margin: 0 auto;
      text-align: left;
    }
    .agree {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40rpx 0;
      .checkbox {
        width: 32rpx;
        height: 32rpx;
        border: 2rpx solid #1162ad;
        margin-right: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .agree-text {
        color: #332121;
      }
      .privacy-text {
        color: rgba(13, 69, 121, 0.8);
        text-decoration: underline;
        text-underline-color: rgba(13, 69, 121, 0.8);
      }
    }
    .agree-btn {
      width: 450rpx;
      height: 88rpx;
      line-height: 88rpx;
      color: #fff;
      border-radius: 27.45rpx;
      background-color: rgb(55, 68, 134);
      margin: 0 auto 36rpx;
    }
    .not-agree-btn {
      width: 450rpx;
      height: 88rpx;
      line-height: 88rpx;
      color: #fff;
      border-radius: 27.45rpx;
      background-color: rgb(131, 132, 136);
      margin: 0 auto;
    }
  }
}
</style>
